<template>
  <div id="app" class="skLifeTableHeader">
    <a-row type="flex" :gutter="[12, 28]">
      <a-col>
        <p v-if="stuName" class="table-header-btn" >{{ stuName }}</p>
        <a-select
          v-else
          default-value="0"
          v-model="dataForm.classId"
          class="class-select"
          style="width: 90px;"
          @change="getDetail(dataForm.dateType)"
        >
          <a-select-option v-for="item in classList" :key="item.id" :value="item.id">
            {{ item.className }}
          </a-select-option>
        </a-select>
      </a-col>
      <a-col v-for="item in dataTypeList" :key="item.id" class="date-box">
        <p :class="dataForm.dateType == item.id?'data-active':''"  class="table-header-btn" @click="getDetail(item.id,item.dateName)">{{ item.dateName }}</p>
      </a-col>
      <a-col>
        <a-select
          default-value="历史学期"
          v-model="dataForm.semesterId"
          class="class-select"
          style="width: 190px;"
          @change="getDetail('historySem')"
        >
          <a-select-option value="历史学期">
            历史学期
          </a-select-option>
          <a-select-option v-for="item in SemesterList" :key="item.id" :value="item.id">
            {{ item.semesterName }}
          </a-select-option>
        </a-select>
      </a-col>
    </a-row>
  </div>
</template>
<script>
import { skClassList, querySkSemester } from '@/api/management.js'
export default {
  name: 'skLifeTableHeader',
  data() {
    return {
      dataForm: {
        dateType: 'week',
        classId: '0',
        semesterId: '历史学期',
        semesterId2: null,
      },
      dataTypeList: [
        { dateName: '本周', id: 'week' },
        { dateName: '本月', id: 'month' },
        { dateName: '本学期', id: 'sem' }
      ],
      classList: [],    //班级列表
      SemesterList:[],   //学期列表
    }
  },
  // props:["dateType","classId","stuName","allClass"],
  props:{
    dateType:String,
    classId:String,
    stuName:String,
    allClass:{
      type:Boolean,
      default:true
    }
  },
  // watch:{
  //   dateType(val){
  //     this.dataForm.dateType = val;
  //   },
  //   classId(val){
  //     this.dataForm.classId = val;
  //   },
  // },
  components: {},
  filters: {},
  
  computed: {},
  
  created() {
    this.dataForm.dateType = this.dateType;
    this.dataForm.classId = this.classId;
    
    this.getSkSemester();
  },
  
  activated() {
  },

  mounted() {
  },

  methods: {
    // 学期列表
    getSkSemester() {
      querySkSemester()
        .then(res => {
          if (res.success) {
            this.SemesterList = res.result.records
            this.getClassList();
          } else {
            this.$message.warning(res.message)
          }
        })
        .catch(error => {
          console.error(error)
        })
    },
    // 班级列表
    getClassList() {
      skClassList()
        .then(res => {
          if (res.success) {
            this.classList = res.result
            if (this.allClass) {
              this.classList.unshift({ className: '全园', id: '0' })
            }
            this.getDetail(this.dataForm.dateType);
          } else {
            this.$message.warning(res.message)
          }
        })
        .catch(error => {
          console.error(error)
        })
    },
    
    getDetail(dateType,dateName){
      if (dateType != "历史学期") {
        let semesterId = null;
        if (dateType == "sem") {
          semesterId = this.getSemesterId(this.$skCommon.getDate(0));
          this.dataForm.semesterId2 = semesterId;
        }else{
          this.dataForm.semesterId2 = null
        }
        if (dateType == "historySem") {
          this.dataForm.semesterId2 = null
          this.dataForm.dateType = "historySem";
          if(this.dataForm.semesterId == "历史学期") {
            this.dataForm.dateType = 'sem';
            semesterId = this.getSemesterId(this.$skCommon.getDate(0));
            this.dataForm.semesterId2 = semesterId;
          }
        }else{
          this.dataForm.dateType = dateType;
          this.dataForm.semesterId = "历史学期"
        }
        console.log( this.classList,this.dataForm.classId);
        this.classList.find(item=>{
          if (item.id == this.dataForm.classId) {
            this.dataForm.className = item.className
          }
        })
        console.log("dataFrom",this.dataForm)
        this.$emit("dataFrom",this.dataForm)
      }
    },
    // 获取学期id
    getSemesterId(date){
      let day = Date.parse(date);
      let Semester = this.SemesterList.filter(item=>{
        let time1 = Date.parse(item.startDate);
        let time2 = Date.parse(item.endDate);
        if (day > time1 && day < time2) {
          return item.id;
        }
      })
      return Semester[0].id
    },
    
  }
}
</script>
<style scoped lang="less">
/* @import url(); 引入css类 */
.date-box {
  text-align: center;
  cursor: pointer;
}
/deep/ .class-select{
  & > div{
    border-radius: 6px;
  }
}
.table-header-btn{
  width:80px;
  line-height: 30px;
  margin:0;
  border:1px solid #d9d9d9;
  border-radius: 6px;
  text-align: center;
}
</style>
